
<template>
  <div>
    <!-- 双向数据绑定 -->
    用户名：<input id="username" v-model.trim="msg" type="text"><br>
    自我介绍：<textarea v-model.lazy="intro" name=""  id=""  cols="30"  rows="10"></textarea><br>
    兴趣爱好：
    <!-- 注意事项:
      checkbox 很特殊, 它分为两种情况
      1. 绑定的值是数组
        会将当前复选框的 value 加入到数组中
        一般用于多选操作, 例如多选题, 兴趣爱好
      2. 绑定的值是非数组 (隐式转换为 boolean)
        会将当前复选框的 checked 属性同步给变量 -->
    <input type="checkbox" value="smoke"/>抽烟
    <input type="checkbox" value="sing"/>唱歌
    <input type="checkbox" value="rap"/>饶舌
    <input type="checkbox" value="dance"/>跳舞
  <br>
  <hr>
  全选 <input v-model="isAll" type="checkbox">
  <br>
  <button  @click="login">提交</button>
  </div>
</template>

<script>
export default {

  data() {
    return {
      msg:'123',
      intro:'',
      hobby:[],
      isAll:false
    };
  },
  methods: {
    login(){
      console.log(this.msg,this.intro);
    }
  },
};
</script>

<style lang="scss" scoped>

</style>